<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title></title>
    <link rel="stylesheet" type="text/css" href="js/bootstrap.css"/>
		<script src="js/jquery-3.2.0.min.js"></script>
		<script src="/js/bootstrap.js"></script>
</head>

<body>
    <div class="container">

        <h1 class="page-header text-center">代码</h1>

        <p style="color: orangered">内联代码</p>
        <p>通过 code 标签包裹内联样式的代码片段。</p>
        <p> <code>&lt;section&gt;</code> 类似于 pre 标签</p>
        <hr />


        <p style="color: orangered">用户输入</p>
        <p>通过 kbd 标签标记用户通过键盘输入的内容</p>
        点击 <kbd>ctrl</kbd>+<kbd>c</kbd> 复制<br /> 点击 <kbd><kbd>ctrl</kbd>+<kbd>s</kbd></kbd> 粘贴<br />

        <hr />



        <p style="color: orangered">按原格式输出</p>
        <pre>&lt;p&gt;多行代码可以使用 pre 标签。为了正确的展示代码，注意将尖括号做转义处理。代码自带灰色填充边框&lt;p&gt;</pre>


        <p class="pre-scrollable">还可以使用 ...pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。</p>
        <hr />


        <p style="color: orangered">变量</p>
        <p>通过 var 标签标记变量。斜体，也可以用 i 标签</p>
        <var>y</var> = <var>a</var> + <var>b</var><br />
        <i>y</i> = <i>a</i> + <i>b</i><br />




    </div>
</body>

</html>
